<template>
  <div>
    <template v-for="(item, index) in amount" :key="item.name">
      <div class="ratetit">{{ item.name }}：{{ item.rate }}% - 共 {{ item.count }} 辆</div>
      <div class="group">
        <a-popover :arrow-style="{ width: 0 }" content-class="popover-class" trigger="click">
          <template #title>
            <div class="car-rate-title flex justify-between">
              <span class="whitespace">{{ siteId ? siteName : '全部门店' }}</span>
              <span
                @click="toCarListFn(item)"
                class="cursor-pointer"
                :class="{ 'text-color': item.count > 0 && usePermission('svms:asstes:car:car-manage') }"
              >
                共{{ item.count }}辆
              </span>
            </div>
            <div class="car-rate-radio-group flex">
              <div
                v-for="(tab, i) in tabs"
                :key="tab.name"
                class="car-rate-radio flex justify-center items-center px-2"
                :class="{ 'car-rate-active': i === isCurrent }"
                @click="onClickCar(tab.type, i)"
              >
                {{ tab.name }}
              </div>
            </div>
          </template>
          <div class="rate-step" :style="{ background: color[index], width: Number(item.rate) + '%' }"></div>
          <template #content>
            <div
              v-show="carRatetType === 'series'"
              class="content-panel"
              v-for="car in data.carOccupancyRate[index].carSeriesInfoDto"
              :key="car.seriesName"
            >
              <div class="whitespace" :title="car.seriesName">{{ car.seriesName }}</div>
              <div class="car-rate-value">{{ car.count }}辆</div>
            </div>
            <div
              v-show="carRatetType === 'model'"
              class="content-panel"
              v-for="car in data.carOccupancyRate[index].carModelInfoDto"
              :key="car.modelName"
            >
              <div class="whitespace" :title="car.modelName">{{ car.modelName }}</div>
              <div class="car-rate-value">{{ car.count }}辆</div>
            </div>
          </template>
        </a-popover>
      </div>
    </template>
  </div>
</template>
<script setup name="carrate">
  import { ref, watch } from 'vue'
  import { useRouter } from 'vue-router'
  import { usePermission } from '@/hooks/usePermission'

  const props = defineProps({
    carStatisticsamount: Object,
    siteId: {
      type: String,
      default: '',
    },
    siteName: {
      type: String,
      default: '',
    },
  })
  const isCurrent = ref(0)
  const router = useRouter()
  const amount = ref([])
  const data = ref()
  const carRatetType = ref('series')
  const tabs = [
    {
      type: 'series',
      name: '车系维度统计',
    },
    {
      type: 'model',
      name: '车型维度统计',
    },
  ]
  const onClickCar = (type, index) => {
    carRatetType.value = type
    isCurrent.value = index
  }
  const color = ref({
    0: '#1890FF',
    1: '#86DF6C',
    2: '#846BCE',
    3: '#F99783',
  })
  watch(
    () => props.carStatisticsamount,
    (value) => {
      if (value?.carOccupancyRate) {
        data.value = value
        amount.value = value.carOccupancyRate.filter((item) => item.name != '已丢失')
      }
    },

    { immediate: true, deep: true }
  )
  // 跳转到车辆列表页
  const toCarListFn = (item) => {
    if (item.count == 0 || !usePermission('svms:asstes:car:car-manage')) return

    let name = ''
    switch (item.name) {
      case '租赁中':
        name = 10
        break
      case '空闲可租':
        name = 20
        break
      case '已借出':
        name = 60
        break
      case '运维中':
        name = 30
        break
      default:
        name = ''
    }
    if (item.name != '已丢失') {
      router.push(`/assets/car/car-manage?siteId=${props.siteId}&operateStatus=${name}`)
    }
  }
</script>
<style lang="less">
  .popover-class {
    display: flex;
    flex-direction: column;
    max-height: 427px;
    overflow: hidden;
    padding: 8px 8px;
    background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%);
    border: none;
    backdrop-filter: blur(10px);
    border-radius: 6px;
    pointer-events: auto;
    .arco-popover-content {
      overflow: auto;
    }
  }
</style>
<style lang="less" scoped>
  .text-color {
    color: #1890ff;
  }
  .car-rate-radio-group {
    margin-bottom: 4px;
    .car-rate-radio {
      height: 20px;
      font-weight: 400;
      font-size: 12px;
      color: #1890ff;
      border-radius: 999px 999px 999px 999px;
      border: 1px solid #1890ff;
      cursor: pointer;
      margin-right: 16px;
      line-height: 0;

      &.car-rate-active {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
  .whitespace {
    max-width: 201px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    margin-right: 20px;
    text-align: left;
  }
  .content-panel {
    display: flex;
    justify-content: space-between;
    padding: 0 9px;
    background: rgba(255, 255, 255, 0.8);
    width: 260px;
    height: 32px;
    line-height: 32px;
    box-shadow: 6px 0px 20px rgba(34, 87, 188, 0.1);
    border-radius: 4px;
    margin-bottom: 4px;

    .car-rate-value {
      font-size: 13px;
      line-height: 15px;
      display: flex;
      align-items: center;
      text-align: right;
      font-weight: 500;
      color: #1d2129;
    }
    .circle {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
  .car-rate-title {
    height: 20px;
    font-weight: 500;
    font-size: 13px;
    color: #1d2129;
    margin-bottom: 10px;
  }
  .group {
    width: 100%;
    height: 24px;
    background-image: url('../../../../assets/databoard/group.png') !important;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
  }
  .rate-step {
    height: 18px;
    border-radius: 2px 2px 2px 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    text-align: right;
    padding-right: 8px;
    white-space: nowrap;
  }
  .ratetit {
    font-size: 12px;
    font-weight: 400;
    color: #4e5969;
    line-height: 20px;
    margin-top: 15px;
  }
</style>
